<template>
  <div class="page-user">
    <XMForm
      v-bind="{ formOptions, formRowColSpan, rules, labelWidth }"
      v-model="form"
      @search="search"
      @reset="reset"
    />
    <div class="content">
      <XMTable
        :tableData="tableData"
        :propsList="propsList"
        :showTableIndex="showTableIndex"
        :showTableSelection="showTableSelection"
        :pageOption="pageOption"
        @changePageSize="changePageSize"
        @changePageCurrent="changePageCurrent"
      >
        <template #tableheader>
          <div class="table-header">
            <div class="header-title">用户列表</div>
            <div class="header-operation">
              <el-button type="primary" size="small">添加用户</el-button>
            </div>
          </div>
        </template>
        <template #enable="scoped">
          <el-button>{{ scoped.row.enable ? '成功' : '失败' }} </el-button>
        </template>
        <template #createAt="scoped">
          <span>{{ timeFormat(scoped.row.createAt) }} </span>
        </template>
        <template #updateAt="scoped">
          <span>{{ timeFormat(scoped.row.updateAt) }} </span>
        </template>
        <template #label>
          <el-button type="primary" size="small" text>编辑</el-button>
          <el-button type="danger" size="small" text>删除</el-button>
        </template>
        <!-- <template #departmentId="scoped">
          <exslot :render="scoped.row.render" :row="scoped.row" />
        </template> -->
      </XMTable>
    </div>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  watch,
  reactive,
  ref,
  onBeforeMount,
  getCurrentInstance,
  ComponentInternalInstance,
} from 'vue';
import XMForm from 'components/form/index.vue';
import XMTable from 'components/table/index.vue';
import { formOptions, formRowColSpan, rules, labelWidth } from './config';
import { getUserList } from '@/service/user';

const exslot = {
  functional: true,
  props: {
    render: {
      type: Function,
      require: true,
    },
    row: {
      type: Object,
      require: true,
    },
  },
  render: (h: any, context: any) => {
    return context.props.render(h, context?.props?.row);
  },
};

export default defineComponent({
  name: 'user',
  components: {
    XMForm,
    XMTable,
    // exslot,
  },
  setup() {
    // 诡异bug 用 reactive 声明的数据 通过子组件修改 父组件监听不到
    const form = ref({ name: '', cellphone: '' });
    const tableData = ref([]);
    const pageOption = reactive({ size: 5, current: 1, total: 0 });

    const showTableIndex = ref(true);
    const showTableSelection = ref(false);

    // 使用config.globalProperties挂载的全局变量
    // 原文地址   https://www.jianshu.com/p/cedba1e47e4b
    const {
      appContext: {
        config: {
          globalProperties: { timeFormat },
        },
      },
    } = getCurrentInstance() as ComponentInternalInstance;
    // console.log(timeFormat);

    const propsList = [
      {
        prop: 'name',
        label: '用户名',
        width: '100',
      },
      {
        prop: 'cellphone',
        label: '手机号',
        width: '120',
      },
      {
        prop: 'realname',
        label: '真名',
        width: '100',
      },
      {
        prop: 'departmentId',
        label: '部门编名',
        width: '100',
      },
      {
        prop: 'enable',
        label: '状态',
        width: '100',
      },
      {
        prop: 'roleId',
        label: '角色ID',
        width: '100',
      },
      {
        prop: 'createAt',
        label: '创建时间',
        width: '220',
      },
      {
        prop: 'updateAt',
        label: '更新时间',
        width: '220',
      },
      {
        label: '操作',
        width: '140',
        slotName: 'label',
        // render: (h, row) => {
        //   return row;
        // },
      },
    ];
    // watch 只对响应式数据有效 返回的ref类型值
    watch(
      form,
      // eslint-disable-next-line
      (val, oldVal) => {
        // console.log('user页面', val);
      },
      {
        deep: true,
      },
    );

    const search = () => {
      // console.log('user', form);
      pageOption.current = 0;
      getUserListData();
    };

    const reset = () => {
      // console.log('user reset');
      getUserListData();
    };

    const getUserListData = async () => {
      let data = {
        // 不能传递那个total 服务器会报错   所以不能使用解构
        offset: (pageOption.current - 1) * pageOption.size,
        size: pageOption.size,
        ...form.value,
      };
      const result = await getUserList(data);
      const { list, totalCount } = result.data;
      tableData.value = list;
      // pageOption.current = data.offset;
      // pageOption.size = data.size;
      pageOption.total = totalCount;
      console.log(result);
    };

    onBeforeMount(() => {
      getUserListData();
    });

    const changePageSize = (size: number) => {
      pageOption.size = size;
      getUserListData();
    };

    const changePageCurrent = (current: number) => {
      // 这么写  会覆盖后面搜索条件的约束
      // getUserListData({ current });
      pageOption.current = current;
      getUserListData();
      // console.log('改变当前页', current);
    };

    return {
      formOptions,
      formRowColSpan,
      showTableSelection,
      showTableIndex,
      rules,
      labelWidth,
      form,
      search,
      reset,
      tableData,
      propsList,
      pageOption,
      timeFormat,
      changePageSize,
      changePageCurrent,
    };
  },
});
</script>

<style scoped lang="less">
.page-user {
  .content {
    margin: 20px 0 0;
    border-top: 20px solid #f5f5f5;
    .table-header {
      display: flex;
      justify-content: space-between;
      margin: 20px 0 10px;
    }
  }
}
</style>
